<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">拼团</block>
			<block slot="right">
				<view class="cuIcon cuIcon-info default margin-right" @tap="modalName='Modal'"></view>
			</block>
		</cu-custom>
		<view class="" v-if="cate">
			<view class="VerticalBox">
				<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 90rpx)">
					<view class="cu-item " :class="index==tabCur2?'text-blue cur':''" v-for="(item,index) in cate" :key="index" @tap="TabSelect2"
					 :data-id="index">
						<text class="margin-lr">{{item.title}}</text>
					</view>
				</scroll-view>
				<scroll-view class="VerticalMain bg-white" scroll-y scroll-with-animation style="height:calc(100vh - 90rpx);width: calc(-200upx);">
					<view class="margin-bottom w100" v-for="(item,index) in cate" :key="index" :id="'main-'+index">
						<block v-if="tabCur2==index">
							<view v-if="item.cover" class="margin-lr margin-top">
								<image :src="item.cover" mode="widthFix" class="w100"></image>
							</view>
							<!-- <view class="margin-lr padding-tb-sm">{{item.title}}</view> -->
							<block v-for="(cate, cate_index) in item.children" :key="cate_index">
								<view class="margin-lr padding-tb-sm text-blue text-bold"><text class="cuIcon cuIcon-titles"></text>{{cate.title}}</view>
								<view v-for="(wholesale, i) in cate.wholesale" :key="i" class="">
									<wholesaleView :value="wholesale" :stype="'list'"></wholesaleView>
								</view>
							</block>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='Modal'?'show':''" @tap="modalName=''">
			<view class="cu-dialog" @tap.stop=''>
				<view class="cu-bar bg-white justify-end">
					<view class="content">规则说明</view>
					<view class="action" @tap="modalName=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white text-left">
					<view>
						1. 选择心仪的产品支付相应的价格开团或者参团，分享给好友；
					</view>
					<view>
						2. 人数一满立即开奖，随机抽取一名中奖用户；
					</view>
					<view>
						3、中奖用户可获得产品，未中奖全额退款并赠送对应奖励;
					</view>
					<view>
						4、中奖信息可在个人中心-拼购管理中查看;
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wholesaleView from '@/components/shop/wholesaleView.vue'
	export default {
		components: {
			wholesaleView
		},
		data() {
			return {
				list: [],
				hasMore: true,
				loading: false,
				page: 1,
				modalName: '',
				TabCur: 0,
				tabCur2: 0,
				verticalNavTop: 0,
				mainCur: 0,
				cate: null,
				load: false,
			};
		},
		filters: {},
		onLoad() {
			this.getCate()
		},
		methods: {
			getCate() {
				this.$http
					.get('marketing_wholesale_cate_index')
					.then((response) => {
						this.cate = response.data.data
					})
					.catch((response) => {
						this.$common.showErrorModal('获取分类失败')
					})

			},
			getList() {
				if (this.hasMore && !this.loading) {
					this.loading = true
					this.$http
						.get('marketing_wholesale_index', {
							page: this.page
						})
						.then((response) => {
							let list = this.list
							if (response.data.data.length > 0) {
								if (list.length > 0)
									list = list.concat(response.data.data)
								else list = response.data.data
								this.list = list
							} else {
								this.hasMore = false
							}
							this.page += 1
							this.loading = false
							console.log(this.allList)
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							this.allList[index].loading = false
							uni.stopPullDownRefresh()
						})
				}
			},
			TabSelect2(e) {
				this.tabCur2 = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return false //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.cate.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.cate[i].id);
						view.fields({
							size: true
						}, data => {
							if (data) {
								this.cate[i].top = tabHeight;
								tabHeight = tabHeight + data.height;
								this.cate[i].bottom = tabHeight;
							}
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.scrollTop + 10;
				for (let i = 0; i < this.cate.length; i++) {
					if (scrollTop > this.cate[i].top && scrollTop < this.cate[i].bottom) {
						this.verticalNavTop = (this.cate[i].id - 1) * 50
						this.tabCur = this.cate[i].id
						return false
					}
				}
			},
		},
		onPullDownRefresh() {
			this.list = []
			this.hasMore = true
			this.loading = false
			this.page = 1
			this.getList()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/marketing/wholesale_list'
			if (this.member) path += "?share_id=" + this.member.id
			return {
				title: this.$config.APP_NAME + '-拼团列表',
				imageUrl: '',
				path: path
			}
		},
	}
</script>

<style>
	.VerticalNav.nav {
		width: 200upx;
		min-width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #f2f2f2;
		margin: 0;
		border: none;
		position: relative;
		padding: 25rpx 0;
		height: unset;
		line-height: 40rpx;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #FFFFFF;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 0 10upx 10upx 0;
		position: absolute;
		background-color: currentColor;
		top: 0;
		left: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		flex: 1;
	}
</style>
